<template>
  <div>
    <el-button type='text' @click='dialogUser = true'>忘记密码 ?</el-button>
    <el-dialog
      width='360px'
      top='25vh'
      title='重置密码'
      :visible.sync='dialogUser'>
      <div class='resetPwd'>
        <h3>请输入要找回密码的账号：</h3>
        <el-input prefix-icon='el-icon-user' v-model='username' placeholder='请输入用户名' />
        <el-button
          @click='resetPwd'
          style='width: 100%;margin: 20px 0;'
          type='primary'>
          下一步
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title='重置密码'
      :visible.sync='dialogPass'
      width='360px'
      top='25vh'>
      <div>
        <el-form ref='form' :model='resetForm' status-icon :rules='rules'>
          <el-form-item prop='newPassword'>
            <el-input show-password v-model='resetForm.newPassword' placeholder='请输入新密码'
                      prefix-icon='el-icon-lock' />
          </el-form-item>
          <el-form-item prop='confirmPassword'>
            <el-input
              type='password'
              show-password v-model='resetForm.confirmPassword'
              placeholder='请确认新密码'
              prefix-icon='el-icon-lock' />
          </el-form-item>
          <fx-verify-code ref='resetVerify' />
          <el-button type='primary' plain style='width: 100%;margin-left: 0;' @click='submit'>重置密码</el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VerifyCode from '@/components/VerifyCode'
import LoginService from '@/service/users/LoginService'

export default {
  name: 'ResetPassword',
  components: {
    'fx-verify-code': VerifyCode
  },
  data() {

    const validatePassword = (rule, value, cb) => {
      if (!value) {
        return cb(new Error('请输入新密码！'))
      }
      if (value.length < 6 || value.length > 16) {
        return cb(new Error('密码长度为 6~16 位字符！'))
      }
      if (value.includes(' ')) {
        return cb(new Error('密码不能包含空格！'))
      }
      if (/[\u4E00-\u9FA5]+/.test(value)) {
        return cb(new Error('密码不能包含中文！'))
      }
      if (!/^\S*(?=\S*\d)(?=\S*[a-zA-Z])\S*$/.test(value)) {
        return cb(new Error('密码必须包含数字和字母！'))
      }
      cb()
    }

    const validatePassword2 = (rule, value, cb) => {
      if (!value) {
        return cb(new Error('请确认新密码！'))
      }
      if (value !== this.resetForm.newPassword) {
        return cb(new Error('两次输入的密码不一致！'))
      }
      cb()
    }

    return {
      username: '',
      dialogUser: false,
      dialogPass: false,
      resetForm: {
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        newPassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePassword2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    async resetPwd() {
      const res = await LoginService.userQuery({userName: this.username})
      if(res.data.status !== 200){
        return this.$message.error(res.data.message)
      }
      this.dialogUser = false
      this.dialogPass = true
    },
   submit() {
      this.$refs.resetVerify.$refs.form.validate(valid => valid)
      this.$refs.form.validate(async valid => {
        if (valid && this.$refs.resetVerify.isVerified) {
          const res = await LoginService.resetPwd({userName: this.username, password: this.resetForm.newPassword})
          if(res.data.status !== 200){
            return this.$message.error(res.data.message)
          }
          this.$message.success(res.data.message)
          this.dialogPass = false

        } else {
          this.$message.error('请输入正确的格式！')
        }
      })
    }
  }
}
</script>

<style scoped>
.el-button--text {
  margin-left: 80%;
  color: #8c939d;
  margin-bottom: 8px;
  padding: 0;
}

.resetPwd {
  width: 100%;
  margin: 0 auto;
}
</style>
